<!--
author:        leishanfeng <1628316216@qq.com>
date:          2023-07-04 14:47:05
component:     index
Copyright © YourCompanyName All rights reserved
-->
<template>
  <div class="switchTab" v-if="tabArr && tabArr.length">
    <div class="switch-box">
      <div
        v-for="(item, index) in tabArr"
        :key="index"
        @click="setTabindex(index)"
        class="switch-box-item"
        :class="tabIndex==index?'active':''"
      >
        {{ item.name }}
        <div class="switch-box-item-img" v-show="tabIndex==index"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'switchTab',
  data(){
    return {
        tabIndex:0,
    }
  },
  props: {
    tabArr: {
      type: Array,
      default: () => []
    },
    currentId: {
      type: String | Number,
      default: ''
    }
  },
  methods: {
    setTabindex(e) {
        this.tabIndex = e;
        this.$emit('getTabindex', e, this.currentId)
    }
  }
}
</script>
<style lang="scss">
.switchTab {
  width: 100%;
  height: 43px;
  border-bottom: 1px solid #1d5a8f;
  .switch-box {
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
    font-family: MicrosoftYaHeiSemibold;
   color: #FFFFFF;
    line-height: 43px;
    position: relative;
    .switch-box-item {
      position: relative;
      padding: 0 25px;
      box-sizing: border-box;
      min-width: 100px;
      text-align: center;
      cursor: pointer;
      border: 1px solid;
      border-color: transparent;
    }
    .switch-box-item-img{
        position: absolute;
        bottom: -1px;
        width: 60px;
        height: 5px;
        left: 50%;
        transform: translateX(-50%);
        background:url('~@/assets/switchTab/tab.png') no-repeat;
    }
    .active{
        color: #4AF6FC;
         background: linear-gradient(
        360deg,
        rgba(74, 246, 252, 0) 0%,
        rgba(117, 250, 255, 0.5) 100%
      );
      box-shadow: inset 0px 0px 10px 0px #4af6fc;
      border-radius: 4px 4px 0px 0px;
      border: 1px solid;
      border-image: linear-gradient(
          270deg,
          rgba(74, 246, 252, 0),
          rgba(74, 246, 252, 1),
          rgba(74, 246, 252, 0)
        )
        1 1;
    }
  }
}
</style>
